<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>订单列表</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../css/order-list.css"/>
<link rel="stylesheet" type="text/css" href="../css/fakeLoader.css">
<script src="../script/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="fakeloader"></div> 

<div id="wrap">
    <div id="header">
        <div class="btn back" tapmode="topbar-active">
            <i class="i-back"></i>
        </div>
        <div class="flex-full">订单列表</div>
        <div class="btn search" tapmode="topbar-active">
            <i class="i-nav"></i>
        </div>
        <div id="nav-dropdown" class="nav-dropdown">
            <ul>
                <li>
                	<a class="react" href="">
                	<i class="i-home"></i>
                    <space></space>首页
                    </a>
                </li>
                <li>
                	<a class="react" rel="nofollow" href="">
                    <i class="i-user"></i>
                    <space></space>我的
                    </a>
                </li>
                <li>
                	<a class="react headSearch" href="">
                	<i class="i-search"></i>
                    <space></space>搜索</a>
               </li>
            </ul>
        </div>
    </div>
<script>
$(document).ready(function(e) {
    $('#header .i-nav').toggle(function(){
				$('#nav-dropdown').addClass('active')
		},function(){
			$('#nav-dropdown').removeClass('active')
	});
});

</script>     
	<div id="main">
    	<div class="order-top">
        	<dl>
            	<dt><span>全部</span></dt>
                <dt><span>待付款</span></dt>
                <dt><span>待使用</span></dt>
                <dt class="active"><span>待评价</span></dt>
                <dt><span>退款/售后</span></dt>
            </dl>
    	</div>
        <div class="order-item" style="margin-top:52px">
            <div class="order">
                <div class="left">
                    <div class="img-ctn">
                        <img class="deal-avatar" src="../image/goods-1.jpg">
                    </div>
                </div>
                <div class="right">
                    <dl>
                        <dt class="title">
                        <div>素之林自助概念餐厅素之林单人自助</div>
                        <div>待评价</div>
                        </dt>
                        <dt class="item">数量: 2</dt>
                        <dt class="item">总价: ￥29.8</dt>
                        <dt class="btn-container ">
                        <a class="mt-btn" href="">评价</a>
                        <a class="mt-btn" href="">再来一单</a>
                        </dt>
                    </dl>
                </div>
            </div>
        </div>
		
        <div class="order-item">
            <div class="order">
                <div class="left">
                    <div class="img-ctn">
                        <img class="deal-avatar" src="../image/goods-2.jpg">
                    </div>
                </div>
                <div class="right">
                    <dl>
                        <dt class="title">
                        <div>素之林自助概念餐厅素之林单人自助1</div>
                        <div>待评价</div>
                        </dt>
                        <dt class="item">数量: 1</dt>
                        <dt class="item">总价: ￥229.8</dt>
                        <dt class="btn-container ">
                        <a class="mt-btn" href="">评价</a>
                        </dt>
                    </dl>
                </div>
            </div>
        </div>

		<div class="order-item">
            <div class="order">
                <div class="left">
                    <div class="img-ctn">
                        <img class="deal-avatar" src="../image/goods-1.jpg">
                    </div>
                </div>
                <div class="right">
                    <dl>
                        <dt class="title">
                        <div>素之林自助概念餐厅素之林单人自助</div>
                        <div>待评价</div>
                        </dt>
                        <dt class="item">数量: 2</dt>
                        <dt class="item">总价: ￥29.8</dt>
                        <dt class="btn-container ">
                        <a class="mt-btn" href="">再来一单</a>
                        </dt>
                    </dl>
                </div>
            </div>
        </div>
        
 <!--没有相关订单-->       
        <div class="no-data-container" style="display: none; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <div class="container" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <div class="bg"></div>
                <div class="info">您还没有相关订单</div>
            </div>
        </div>

	</div>
    <div id="footer">
       <div class="footer-nav">
            <ul>
                <li>
                <a class="react" href="">首页</a>
                </li>
                <li>
                <a class="react" href=""> 美团下载 </a>
                </li>
                <li>
                <a class="react" href="">电脑版</a>
                </li>
                <li>
                <a class="react" href="">帮助</a>
                </li>
            </ul>
        </div>
        <div class="footer-links">
        友情链接：
        	<a target="_blank" href="">猫眼电影</a>
            <a target="_blank" href="">猫眼电影</a>
            <a target="_blank" href="">猫眼电影</a>
        </div>
        <div class="footer-copyright">
            <div class="hr"></div>
            <span class="footer-copyright-text">
                ©2017 木为网
                <a href="" target="_blank" rel="nofollow">京ICP证070791号</a>
            </span>
        </div>
    
    </div>	
 </div>
 
<div class="pop-content">
    <div class="pop-main">
        <img src="../image/c5.png">
        <p>
        元旦来临200元大红包<br>
        就在xx公众号
        </p>
        <a href="" class="pop-btn">立即关注</a>
    </div>
</div>
<div class="top-btn" style="display: block;">
<a class="react">
    <i class="text-icon">⇧</i>
</a>
</div>
    <script>
    
    //top行为
    $('.top-btn').on('click',function(){
    $("html, body").animate({ scrollTop: 0 }, "slow");
    });
    if ($(document).scrollTop() == 0) {
    $('.top-btn').css('display','none');
    }
    $(document).bind('scroll',function() {
    if ($(document).scrollTop() == 0) {
    $('.top-btn').css('display','none');
    }else{
    $('.top-btn').css('display','block');
    }
    })	
	</script>
<script src="../script/fakeLoader.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".fakeloader").fakeLoader({
        timeToHide:1200,
        bgColor:"#1abc9c",
        spinner:"spinner6"
    });
});
</script>    
	</body>
</html>
